<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="24" >
      <el-col  :xs="24" :sm="16" :lg="16"  >
        <el-card class="box-chart" >
          <div style="" slot="header" class="clearfix">
    <span  style="padding-left: 10px;" class="text">发送量数据</span>
    <el-button-group style="float: right;;">
  <el-button size="mini" type="primary"  @click="lineChartData = lineChartData2">上月</el-button>
  <el-button size="mini" type="primary"  @click=" lineChartData = lineChartData1">本月</el-button>
</el-button-group>
  </div>
  <el-row :gutter="24">
    <el-col :span="6">
      <div class="count-box" >
    <div>
      <div class="title-box title" >发送总量  (条)<a style=""></a></div>
    <div class="count-data" >
      <div style="line-height: 28px;font-size: 28px;margin:15px 0px 20px 0px;">
        {{totalCount}}
      </div>
    </div>
    </div>

    <div style="display: flex;float: left;">

    <div>
      <div class="title-box title-m" >邮件总量(条)<a style=""></a></div>
    <div class="count-data" >
      <div style="line-height: 28px;font-size: 18px;margin:15px 0px 20px 0px;">{{mailCount1}}</div>
    </div>
    </div>

    <div>
      <div class="title-box-1 title-m" >短信总量(条)<a style=""></a></div>
    <div class="count-data-1" style="">
      <div style="line-height: 28px;font-size: 18px;margin:15px 0px 20px 0px;">{{msgCount1}}</div>
    </div>
    </div>

  </div>
  </div>
    </el-col>
    <el-col :span="18">
  <div style=""> <line-chart  :chart-data="lineChartData" /></div>
  </el-col>
  </el-row>
        </el-card>
    </el-col>
    <!--折叠飞机 https://assets6.lottiefiles.com/private_files/lf30_GAiHca.json
     飞 https://assets6.lottiefiles.com/packages/lf30_GAiHca.json -->
     <el-col :xs="24" :sm="8" :lg="8"  style="">
     <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
    <span class="text">预警功能列表</span>
  </div>
  <!-- <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row> -->
      <el-row :gutter="24">
  <el-col :span="5"><div class="grid-content bg-purple row-con" >
    <el-tag effect="plain" @click="autoSendMonitor = true"><a>定时发送</a></el-tag>
  </div></el-col>
  <!-- <el-col :span="6" style=""><div class="grid-content bg-purple  row-con" >
    <el-switch
    :width="65"
    v-model="flag"
    active-value="0"
    inactive-value="1"
    @change="status"
    >
  </el-switch>
  </div></el-col> -->


  <el-col :span="7" style="">
    <div class="grid-content bg-purple row-con" >
    <div style="display: flex;
    justify-content: space-around;">
      <div>
      <label class="text" style=" font-size: 14px;
    font-weight:bolder;
    font-family:STHeiti;line-height: 50px;">任务数量:</label>
      </div>
      <div>
        <a>{{ currentCount }}</a>
      </div>
    </div>
    </div>
    
</el-col>
<el-col :span="7" style="">
    <div class="grid-content bg-purple row-con" >
    <div style="display: flex;
    justify-content: space-around;">
      <div>
      <label class="text" style=" font-size: 14px;
    font-weight:bolder;
    font-family:STHeiti;line-height: 50px;">正在运行:</label>
      </div>
      <div>
        <a>{{ underRun }}</a>
      </div>
    </div>
    </div>
  </el-col>
<el-col :span="5" style="padding-left: 0px;">
  <div class="grid-content bg-purple row-con" >
    <el-button type="primary"  size="mini" icon="el-icon-s-operation" plain @click="autoSendMonitor = true">管理</el-button>
    </div>
  </el-col>

<el-col :span="5"><div class="grid-content bg-purple row-con" >
    <el-tag effect="plain"  @click="autoWarnMonitor = true"><a>自动预警</a></el-tag>
  </div></el-col>
 
  <el-col :span="7" style="padding-right: 0;"><div class="grid-content bg-purple row-con" >
    <div style="display: flex;
    justify-content: space-around;">
      <div>
      <label class="text" style=";line-height: 50px;">运行状态:</label>
      </div>
      <div v-loading="status_load">
        <el-tag  size="mini"  effect="dark" :type="(flag == 0 ? 'success':'danger')"><a>{{status_n2}}</a></el-tag>
      </div>
    </div>
    </div>
  </el-col>
  <el-col :span="7" style="">
    <div class="grid-content bg-purple row-con" >
    <div style="display: flex;
    justify-content: space-around;">
      <div>
      <label class="text" style=" font-size: 14px;
    font-weight:bolder;
    font-family:STHeiti;line-height: 50px;">预警次数:</label>
      </div>
      <div>
        <a>{{ warnCount }}</a>
      </div>
    </div>
    </div>

    
</el-col>
 <el-col :span="5" style="padding-left: 0px;">
  <div class="grid-content bg-purple row-con" >
    <el-button type="primary"  size="mini" icon="el-icon-s-operation" plain @click="autoWarnMonitor = true">管理</el-button>
    </div>
  </el-col>
      </el-row>
   
    </el-card>
    </el-col>
</el-row>



<el-row :gutter="24">
  <el-col  :xs="24" :sm="9" :lg="9"  >
  <el-card class="box-card" style="height: 400px;" shadow="hover">
      <div slot="header" class="clearfix">
    <span class="text">内容模板</span>
    <el-button icon="el-icon-plus"  size="mini" type="primary" style="float: right;" 
    @click="handleAdd"
          v-hasPermi="['monitor:model:add']">添加</el-button>
  </div>
    
  <!-- :show-header="false" -->
  <el-table
    v-loading="loading"
    :data="modelList"
    :row-style="{height: '0'}"
    :cell-style="{padding: '5'}"
    max-height="350"
    style="width: 100%;font-weight: bold;color: #303133;font-size: 13px;"
    >
    <el-table-column
    align="center"
      prop="id"
      label="id"
      width="120">
    </el-table-column>
    <el-table-column
    align="center"
      prop="title"
      label="标题"
      width="120">
    </el-table-column>
    <el-table-column
    align="center"
      prop="type"
      sortable
      label="类型">
    </el-table-column>
    <el-table-column
    align="center"
     label="操作"
    width="100">
    <template slot-scope="scope">
    <el-button size="mini" type="success" icon="el-icon-edit"  @click="handleUpdate(scope.row)" circle></el-button>
  <el-button size="mini" type="primary" icon="el-icon-delete"    @click="handleDelete(scope.row)"  circle></el-button>
    </template>    
</el-table-column>
    
  </el-table>
   
    </el-card>
  </el-col>

 <!-- 添加或修改邮件模板对话框 -->
 <el-dialog :title="title" :visible.sync="model_open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="model_rules" label-width="80px">
        <el-form-item label="模板标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item style="color: #303133;font-size:13px;font-weight: bold;" label="模板内容" prop="content">
          <el-input type="textarea" autosize v-model="form.content" :min-height="192"/>
        </el-form-item>
        <el-form-item label="模板类型" prop="type">
        <el-select  v-model="form.type" allow-create filterable clearable placeholder="请选择信息类型" >
            <el-option
              v-for="item in modeltype"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  <el-col  :xs="24" :sm="7" :lg="7"  >
  <el-card  class="animation"  style="height: 400px;border-radius: 35px;background-color:#689F38; border: 0px;" shadow="never">
    <div style="text-align: center;height: 400px;line-height: 400px " >
      <div style="margin-top: 20px;">
      <lottie   :options="backOption" :height="350" :width="350" v-on:animCreated="backAnimation"/>
    </div>
    </div>
    </el-card>
    </el-col>
    <el-col  :xs="24" :sm="8" :lg="8"  >
  <el-card class="box-card" style="height: 400px;" shadow="hover">
    <div slot="header" class="clearfix">
    <span class="text">手动发送</span>
    <el-button icon="el-icon-s-promotion"  size="mini" style="float: right" type="info" @click="dialogTableVisible = true">批量发送</el-button>
  </div>
    <div style="text-align: center;">
      <el-main>
      <el-table
      height=300px
    v-loading="user_loading" :data="userList"
    :row-style="{height: '0'}"
    :cell-style="{padding: '5'}"

    max-height="300"
    style="width: 100%;font-weight: bold;color: #303133;font-size: 13px;font-family:STHeiti;"
    >
    <el-table-column
    label="用户名称" align="center" key="userName" prop="userName"
      width="95">
    </el-table-column>
    <el-table-column
      prop="email"
      sortable
      align="center"
      width="100"
      label="邮箱">
    </el-table-column>
    <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"
      width="120" />
    <el-table-column label="操作" align="center"
    width="90" fixed="right">
    <template slot-scope="scope" >
  <el-button size="mini" type="success" icon="el-icon-message" @click="handleUserId(scope.row)"  circle :disabled="!(scope.row.status === '0' && scope.row.mailStatus === '0'  )"  ></el-button>
  <el-button size="mini" type="primary" icon="el-icon-edit"   @click="handleUpdateUser(scope.row)"
                v-hasPermi="['system:user:edit']" circle></el-button>
              </template>
         
    </el-table-column>
  </el-table>
     <!-- 添加或修改用户配置对话框 -->
     <el-dialog :title="user_title" :visible.sync="user_open" width="600px" append-to-body>
      <el-form ref="user_form" :model="user_form" :rules="user_rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="user_form.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="user_form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user_form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="user_form.status">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="user_form.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="user_form.roleIds" multiple placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="user_form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUserForm">确 定</el-button>
        <el-button @click="user_cancel">取 消</el-button>
      </div>
    </el-dialog>
</el-main>
 <el-footer>
    <div  style="width: 100%;text-align: center;">
    <el-form :model="queryParams_user"  :inline="true"  label-width="68px" style="">
      <el-form-item   prop="userName" >

        <el-input  class="search-1" style="line-height: 58px;"
          v-model="queryParams_user.userName"
          placeholder="请输入用户名"
          @keyup.enter.native="handleQuery"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button class="medi" style="margin-top: 10px;margin-left: 10px;" type="success" icon="el-icon-search" size="medium" @click="handleQuery"  circle></el-button>
      </el-form-item>
    </el-form>
  </div>
</el-footer>
  </div>
  </el-card>
  </el-col>
<!-- 

*************************************************************************************************************************************************


   -->
<!-- 单独发送 -->
<el-dialog :title=single_title width="35%"  :visible.sync="dialogTableVisible4" :close-on-click-modal="false" append-to-body 
@close='closeDialog4'>

  <el-container>
      <el-header>
    <el-select
    v-model="value1" placeholder="请选择" @change="sellectTotal">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
    </el-option>
  </el-select>
    <!-- <el-select
    style="margin-left: 20px;"
    v-model="value1" placeholder="请选择" @change="sellectTotal">
    <el-option
      v-for="item in rank_options"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
    </el-option>
  </el-select> -->
</el-header>
<el-main>
  <span style="margin-left: 10px;font-size: 18px;font-weight: bold; ">预览</span>
  <div style=";width:95%;height: 100px;margin-left: 10px;margin-top:10px ">
    <el-input type="textarea" :rows="4" v-model="value1" disabled></el-input>
    <!-- <p style="font-size:15px;font-weight: lighter;color: black;margin-top: 0px;">{{ value1 }}</p> -->
  </div>
  <div style="margin: 10px 0 0 10px">
  <el-radio v-model="radio" label="邮件">邮件</el-radio>
  <el-radio v-model="radio" label="短信" disabled>短信</el-radio>
</div>

</el-main>


<el-footer>
  <div style="margin-top: 25px;text-align: center;">
  <el-button type="primary" @click="submitMsgForm" >发送<i class="el-icon-s-promotion el-icon--right"></i></el-button>
  <el-button type="info" @click="dialogTableVisible4 = false">取消<i class="el-icon-circle-close el-icon--right"></i></el-button>
  </div>
</el-footer>

</el-container>
</el-dialog>

</el-row>
<el-dialog title="发送控制面板" width="62%" :visible.sync="dialogTableVisible" :close-on-click-modal="false"  
 >
  <div style="text-align: center;" >
    <el-transfer 
      style="text-align: left; display: inline-block;;"
      v-model="value"
      filterable
      :left-default-checked="[]"
      :right-default-checked="[]"
      :titles="['用户列表', '待发送']"
      :button-texts="['', '']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      @right-check-change="isselected"
      @left-check-change="isselected2"
      :data="tran_data">
      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
      <el-button class="transfer-footer" slot="right-footer" type="primary" size="small" style="float: right;margin:  8px 10px;"
      @click="define"  >自定义内容</el-button>
      <el-button class="transfer-footer" slot="right-footer" type="primary" size="small" style="float: right;margin:  8px 10px;"
      @click="selectModel"  >选择模板</el-button>
    </el-transfer>
    <!-- 选择现有模板 -->
    <el-dialog :title=batchmodel_title width="40%" :visible.sync="dialogTableVisible2" :close-on-click-modal="false" append-to-body 
    @close='closeDialog2'>
      <el-container>
      <el-header>
    <el-select
    v-model="value2" placeholder="请选择" @change="sellectTotal">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
    </el-option>
  </el-select>
    <!-- <el-select
    style="margin-left: 20px;"
    v-model="value1" placeholder="请选择" @change="sellectTotal">
    <el-option
      v-for="item in rank_options"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
    </el-option>
  </el-select> -->
</el-header>
<el-main>
  <span style="margin-left: 10px;font-size: 18px;font-weight: bold; ">预览</span>
  <div style=";width:95%;height: 100px;margin-left: 10px;margin-top:10px ">
    <el-input type="textarea" :rows="4" v-model="value2" disabled></el-input>
    <!-- <p style="font-size:15px;font-weight: lighter;color: black;margin-top: 0px;">{{ value2 }}</p> -->
  </div>
  <div style="margin: 10px 0 0 10px">
  <el-radio v-model="radio" label="邮件">邮件</el-radio>
  <el-radio v-model="radio" label="短信" disabled>短信</el-radio>
</div>
<label>定时:{{ qua }}</label>
</el-main>


<el-footer>
  <div style="margin-top: 25px;text-align: center;">
  <el-button type="primary" @click="submitMsgFormBatch" >{{but}}<i class="el-icon-s-promotion el-icon--right"></i></el-button>
  <el-button type="warning" @click="openC1 ">定时<i class="el-icon-timer el-icon--right"></i></el-button>
  <el-button type="info" @click="closeSumbit">取消<i class="el-icon-circle-close el-icon--right"></i></el-button>
  </div>
</el-footer>

</el-container>
</el-dialog>


<!-- 自定义内容 -->
<el-dialog :title=batchdefine_title width="40%" :visible.sync="dialogTableVisible3" :close-on-click-modal="false" append-to-body 
@close='closeDialog3'>
      <el-container>
<el-main>
  <el-form class="defineself"  ref="form2" :model="form2" :rules="model_rules" label-width="80px">
        <el-form-item  label="模板标题" prop="title">
          <el-input v-model="form2.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="模板内容" prop="content" style="color: #303133;font-size:13px;font-weight: bold;">
          <el-input type="textarea" :rows="4" v-model="form2.content" :min-height="192"/>
        </el-form-item>
        <el-form-item label="模板类型" prop="type">
        <el-select v-model="form2.type" allow-create filterable clearable placeholder="请选择信息类型">
            <el-option
              v-for="item in modeltype"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      </el-form>
      <label>定时:{{ qua }}</label>
</el-main>

<el-footer>
  <div style="margin-top: 25px;text-align: center;">
  
    <!-- el-icon-timer -->
   
    <el-button type="primary" @click="submitForm2">保存到模板<i class="el-icon-upload el-icon--right"></i></el-button>
  <el-button type="primary" @click="submitMsgForm2Batch">{{ but }}<i class="el-icon-s-promotion el-icon--right"></i></el-button>
  
   <el-button type="warning" @click="openC " >定时<i class="el-icon-timer el-icon--right"></i></el-button>
  <el-button type="info" @click="closeSumbit2">取消<i class="el-icon-circle-close el-icon--right"></i></el-button>


</div>
</el-footer>

</el-container>
</el-dialog>
  </div>
</el-dialog>
<el-dialog  title="Cron表达式生成器" width="30%" :visible.sync="openCron" append-to-body destroy-on-close  >
  <el-row style="text-align: center">
    <el-col span="8">
    <el-input
  
  placeholder="任务标题"
  v-model="taskTitle"
  clearable>
</el-input>
</el-col>
  </el-row>
  <el-row >
    <div style="; height:50px;">
  <easy-cron :timeCronStr="timeCronStr" @change="getCron(arguments)"  ></easy-cron>
</div>
  </el-row>
 
    <span slot="footer" class="dialog-footer">
    <el-button @click="openCron = false">取 消</el-button>
    <el-button type="primary" @click="submitQu">确 定</el-button>
  </span>
    </el-dialog>
<!-- expression, status,update_time -->
<el-dialog  title="自动发送管理" width="70%" :visible.sync="autoSendMonitor" :close-on-click-modal="true" v-if="autoSendMonitor == true" >
  <div style="background-color: white;height: 530px;overflow: auto;">
    <job-table :users="tran_data" @total="getUnderRun" @currentCount="getCurrentRun"></job-table>

  </div>
 
</el-dialog>

<el-dialog  title="自动预警管理" width="50%" :visible.sync="autoWarnMonitor" :close-on-click-modal="true" v-if="autoWarnMonitor == true" >
  <div style="background-color: #689F38;height: 200px;">
    <el-row></el-row>
    <el-row :gutter="24">
    <el-col :span="6"  style="text-align: center;">
      <el-tooltip  effect="dark"  placement="right-end" >
        <div slot="content">主开关</div>
        <el-tag  ><a>实时报警开关</a></el-tag>
    </el-tooltip>
    </el-col>
   
    <el-col :span="4">
      <div style="text-align: center;line-height: 28px;">
        <el-switch
        :width="65"
        v-model="flag"
        active-value="0"
        inactive-value="1"
        @change="openMonitor"
        >
      </el-switch>

      </div>
      
    </el-col>
    <el-col :span="14">
     
        <div style="float: left;color: black;font-weight: light;line-height: 28px;">
          <el-tooltip  effect="plain"  placement="right-end" disabled>
          <el-tag  effect="dark" type="success">
          <a>以数据获取频率为标准，获取数据时进行报警</a>
        </el-tag> 
      </el-tooltip>
      </div>
        </el-col>
    </el-row>

    <el-row :gutter="24">
    <el-col :span="6"  style=";text-align: center;">
      <el-tooltip  effect="dark"  placement="right-end" disabled>
      <el-tag  ><a>预测报警开关</a></el-tag>
    </el-tooltip>
    </el-col>
    <el-col :span="4">
      <div style="text-align: center;line-height: 28px;">
        <el-switch
        :width="65"
        v-model="flag2"
        active-value="0"
        inactive-value="1"
        @change="updatePreStatus"
        >
      </el-switch>

      </div>
      
    </el-col>
    <el-col :span="14">
      <el-tooltip  effect="dark"  placement="right-end" disabled>
      <div style="float: left;color: black;font-weight: light;line-height: 28px;">
        <el-tooltip  effect="plain"  placement="right-end" disabled>
        <el-tag effect="dark" type="success">
          <a>
        通过预测数据将一小时后的数据进行预报 
          </a>
        </el-tag> 
        </el-tooltip>
      </div>
      </el-tooltip>
      </el-col>
    </el-row>
    <el-row>
 
    </el-row>
  </div>
 
</el-dialog>

  </div>
  
  
</template>

<script>
import '@lottiefiles/lottie-player';
import dayjs from 'dayjs'
import Lottie  from 'vue-lottie';
import back from '../sendConsole/annimation/99797-data-management.json'
import LineChart from './LineChart.vue'
import {countAlarm,listJobByUUID,countRun,autoSendAdd, count, lineChartDefault,send,sendBatch} from "@/api/sender/sender";
import { listModel, getModel, delModel, addModel, updateModel } from "@/api/model/model";
import {listUser, getUser,addUser, updateUser} from "@/api/system/user";
import {getPreStatus,changePreStatus,getStatus,changeStatus} from "@/api/system/menu"
import Crontab from '@/components/Crontab'
import easyCron from './com/easyCron.vue'
import jobTable from './com/jobTable.vue'
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
}
  export default {
    dicts: ['sys_normal_disable', 'sys_user_sex'],
  name: 'Index',
  components:{
    jobTable,
    easyCron,
    Lottie,
    LineChart,
    Crontab
  },
  data() {
    

    return {
      status_load:true,
      autoWarnMonitor:false,
      underRun:0,
      taskTitle:'',
      but:"发送",
      jobVo:{
        jobId:null,
        jobName:null,
        cronExpression:null,
        expression:null,
        // misfirePolicy:"0",
        concurrent:null,//并发（0允许 1禁止）
        status:null,
        userIds:[],
        msg:{}
      },

      timeCronStr:'',
      expression: "",
      // 是否显示Cron表达式弹出层
      openCron: false,
      warnCount:35,
      currentCount:12,
      forbid:false,
      batchdefine_title:"自定义内容",
      batchmodel_title:"模板选择",
      single_title:"模板选择",
      name: "",
      msg_id :  null,
      msg_title:null,
      msg_form:{},
      ids:[],
      user_id:null,
      radio:'邮件',
      user_loading: true,
      showSearch: true,
      // 总条数
      user_total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      user_title: "",
      user_open: false,
       // 查询参数
       queryParams_user: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      user_form: {},
        // 总条数
        total: 0,
      // 邮件模板表格数据
      modelList: [],
      model_open: false,
      // 表单参数
      form: {},
      loading: true,
      countList:[],
      lineChartData:{ 
        date:[],
        messCounts:[],
        mailCounts:[],
      },
      lineChartData1: {
        date:[],
        mailCounts:[],
        messCounts:[],
      },
      lineChartData2: {
        date:[],
        messCounts:[],
        mailCounts:[],
      },
      lineType:'1',
      form: {},
      form2: {},
      modelContent:'',
      modeltype: [{
          value: '通知',
          label: '通知'
        }, {
          value: '警告',
          label: '警告'
        }, {
          value: '建议',
          label: '建议'
        }],
      options: [],
      modelOption:{
        id:null,
        value: null,
        label: null,
      },
        value1: '',
        value2:'',
        autoSendMonitor:false,
        dialogTableVisible4:false,
        dialogTableVisible3: false,
      dialogFormVisible2: false,
      dialogTableVisible2: false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        queryParams_model: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        content: null,
        type: null
      },

      totalCount:58,
      mailCount:0,
      msgCount:0,
      messCount:0,
      status_n:"已停止",
      status_n2:"停止",
      backOption:{animationData: back},
      anim:{},
      flag: '1',
      flag2: '1',
      last:'',
      cron:'',
      qua:'无',
      cronMid:[],
      select_data:[],
      //穿梭框数据
      tran_data: [],
        value: [],
        sendFlag:true,
          // 表单校验
        user_list:null,
        nameList:[],
      user_rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],

        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      model_rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        content: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "信息类型", trigger: "blur" }
        ],
        },
      };
  },
// 
    created() {
      this.getAlarmCount()
      this.getPre()
      this.getStatus()
      this.getCountAll();
      this.getLineChart();
      this.getList();
      this.getUserList();
      this.countRun()
      this.getJobSize()
      this.getStatus()
    },
  methods: {
    getAlarmCount(){
      countAlarm("1").then(response=>{
        // console.log(response.data[0])
        this.warnCount = response.data[0].alarmCount
      })
    },

    getPre(){
      getPreStatus().then(response=>{
        this.flag2 = response.msg
      })
    },
    updatePreStatus(){
      changePreStatus(this.flag2).then(response=>{
        if(response.msg == "0"){
          this.$message.success("开启成功");
        }else if(response.msg == "1"){
          this.$message.success("关闭成功");
        }else{
          this.$message.warning("")
        }
      })
    },
    getStatus(){
      getStatus().then(response=>{
        this.flag = response.msg
        console.log(response)

        if(this.flag == '1'){
          this.status_n2 = '停止'
          setTimeout(() => {
            this.status_load = false;
           }, 500);
        }else if(this.flag == '0'){
          this.status_n2 = '运行'
          setTimeout(() => {
            this.status_load = false;
           }, 500);
        }
      })
 
    },

    openMonitor(){
      // this.flag = this.flag == '1' ?'0':'1';
      console.log(this.flag)
      this.status_load = true
      changeStatus(this.flag).then(response=>{
        console.log(response)
        if(response.msg == '1'){
          this.$message.success("关闭成功");

          this.status_n2 = '停止'
      
          setTimeout(() => {
            this.status_load = false;
           }, 800);
        }else if(response.msg == '0'){
          this.$message.success("开启成功");

          this.status_n2 = '运行'
          setTimeout(() => {
            this.status_load = false;
           }, 800);
        }
      })
    },
    getJobSize() {
        listJobByUUID().then(response => {
      // console.log("几条数据")
         this.currentCount = response.rows.length
        });
      },
      getCurrentRun(val){
        this.currentCount = val
      },
    getUnderRun(val){
        console.log(val)
        this.underRun = val
    },
    countRun(){
      countRun().then(response=>{
        console.log(response)
        this.underRun = response.data
       
      })
    },
    closeDialog(){
      this.tran_data.length =0;
      this.msg_form = null
},
    closeDialog2(){
      this.msg_title = null,
      this.value2 = null,
      this.msg_id = null
    },
    closeDialog3(){
      this.form2.type = null,
      this.form2.title = null,
      this.form2.content = null
},
    closeDialog4(){
      this.value1= null,
     this.msg_id = null
    },
    
    submitQu(){
      console.log("**************")
      console.log(this.cronMid)
      if(this.taskTitle == ""){
        this.$message.warning('请输入任务名称');
        return
      }
      if(this.cronMid.length == 0){
        this.$message.warning('请选择定时');
        return
      }
   
      console.log("**************")
      // if(this.cron == nu)
       this.cron =this.cronMid[1]
      this.qua = this.cronMid[0]
      
      this.but = "执行";
      console.log(this.qua)
      console.log(this.cron)
      this.openCron = false;
    },

    getCron(val){
      console.log("**************")
      // console.log(val[0])
      // console.log(val[1])
      this.cronMid = val,
      // this.cron = val[1]
      // this.qua = val[0]
      // this.but = "执行";
      console.log("**************")
    },
    openC1(){
      if(this.value2 != "" ){
            this.openCron = true;
        }else{
        this.$message.warning('请选择模板');
        }
    },
    openC(){
      this.$refs["form2"].validate(valid => {
        if (valid) {
            this.openCron = true;
        }
      })
    },
    submitAuto(userIds,msg){

      this.jobVo.jobName = '测试';
      this.jobVo.cronExpression = this.cron;
      this.jobVo.userIds = userIds;
      this.jobVo.msg = msg;
      this.jobVo.expression = this.qua
      autoSendAdd(this.jobVo).then(response=>{
        if(response.msg=="操作成功")
        this.$message.success("定时发送设置成功");
        this.countRun()
      })
    },
   
    isselected2(value){

    },
    isselected(value){
      this.select_data = value
      if(value.length != 0){
        this.user_list = this.select_data
      }else{
        this.user_list.length = 0
      }
    },
    handleChange(value, direction, movedKeys) {
      // console.log("----------------------------------");
        // console.log(value, direction, movedKeys);
        // console.log(this.user_list);
        //一旦发生变化就刷新
        this.user_list.length = 0;
        // console.log(this.user_list);
        // console.log("----------------------------------");
      },
    define(){
      this.but = "发送"

      // console.log("111111111111111111");

      var f = (JSON.stringify(this.select_data) === JSON.stringify(this.user_list))
      // console.log(f);

      // if(this.value!=null && this.value.length != 0 &&this.user_list.length != this.value.length){
      //   this.user_list = this.value
        
      // }
      // console.log("111111111111111111");

      if(!f || this.value.length === null || this.value.length ===0 || this.user_list === null || this.user_list.length === 0){
        this.$message.warning('请选择用户');
      }else{
        this.name = ""
        this.batchdefine_title = "自定义内容("
        this.user_list.forEach(uid =>{
        var name = this.userList.find(user => user.userId === uid).userName;
        this.batchdefine_title += name + ",";
        })
        this.batchdefine_title = this.batchdefine_title.substring(0,this.batchdefine_title.length-1)
        this.batchdefine_title += ")"
          this.dialogTableVisible3 = true
      }
    },
    selectModel(){
      this.but = "发送"

      // console.log(this.value)
      var f = (JSON.stringify(this.select_data) === JSON.stringify(this.user_list))
      // console.log(f);
      // if(this.user_list.length != this.value.length){
      //   this.user_list = this.value
      // }
      if(!f || this.value.length ===0 || this.user_list === null || this.user_list.length === 0){
        this.$message.warning('请选择用户');
      }else{
        this.name = ""
        this.batchmodel_title = "选择模板("
        this.user_list.forEach(uid =>{
        var name = this.userList.find(user => user.userId === uid).userName;
        this.batchmodel_title  +=  name+","
        })
        this.batchmodel_title =  this.batchmodel_title.substring(0,this.batchmodel_title.length-1)
        this.batchmodel_title  +=  ")"
          this.dialogTableVisible2 = true
      }
    },


    /** 搜索按钮操作 */
    handleQuery() {
      this.getUserList();
    },
        /** 查询用户列表 */
        getUserList() {
          this.tran_data.length =0;
          // console.log("sadsadasdasdas")
      this.user_loading = true;
      listUser(this.addDateRange(this.queryParams_user, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.userList.forEach(user => {
            var user_status = "";
//  console.log(user.status+":"+user.mailStatus)
            if(user.status === "1"){
              user_status = "该用户已停用"
              
            }else if(user.mailStatus === "1"){
              user_status = "已关闭邮箱功能"
            }else{
              user_status = "正常"
            }
            var a =(user.status === "0" && user.mailStatus === "0");
            // this.forbid = !a;
//  console.log(user.status+":"+user.mailStatus)
           
     

            var data = {key: user.userId,label:user.userName+"-"+user_status,disabled:!a}
            this.tran_data.push(data)
          })
          
          this.user_total = response.total;
          this.user_loading= false;
        }
      );
    },
      // 取消按钮
      user_cancel() {
      this.user_open = false;
      this.resetUser();
    },
      // 表单重置
      resetUser() {
      this.user_form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("user_form");
    },
    handleUserId(row){
        this.dialogTableVisible4 = true
        this.user_id = row.userId
        this.single_title = "选择模板";
         this.single_title += "(发送给"+row.userName+")"
    },
    //信息发送，传值 title,content,model的type对应msg的rank（预警建议通知）,用户id
    // sendToUser(){
    //   this.submitMsgForm
    // },
    submitMsgForm2Batch: function() {
      // console.log("7777777777777777777777")
      // let arr = Array.from(this.form2)
      // console.log(arr)
      // console.log("7777777777777777777777")
      this.$refs["form2"].validate(valid => {
        if (valid) {
        
      if( this.form2.title === "" || this.form2.content === ""|| this.form2.type === ""){
        this.$message.warning('内容不能为空');
      }else if( this.form2.title != "" && this.form2.content != "" && this.form2.type != ""){
     

      this.ids =  this.user_list;
      this.msg_form.type =  this.form2.type;
      this.msg_form.title = this.form2.title
      this.msg_form.content = this.form2.content
      
      if(this.but == "执行"){
        console.log('---执行---')
            this.submitAuto(this.ids,this.msg_form)
            this.getJobSize()
            setTimeout(200)
            this.countRun()
          }else{
            sendBatch(this.ids,this.msg_form).then(response => {
        if(response.data === true){
          this.$modal.msgSuccess("发送成功");
          this.dialogTableVisible3 = false
          // console.log('888888888888888888888')
           this.refreshCount()
        }
       });
          }
      }else{
        this.$message.warning('内容不能为空');
      }
    }}
    )

  
    },

    closeSumbit2(){
      this.form2.type = null,
      this.form2.title = null,
      this.form2.content = null,
      this.but = "发送",
      this.qua = "无",
      this.dialogTableVisible3 = false

    },
    closeSumbit(){
      this.msg_title = null,
      this.value2 = null,
      this.msg_id = null,
      this.but = "发送",
      this.qua = "无",
      this.dialogTableVisible2 = false
    },
    submitMsgFormBatch: function() {
      if(this.value2 === "" ){
        this.$message.warning('请选择模板');
      }else{
        this.msg_form.type =  this.radio;

      this.ids =  this.user_list;

      this.msg_form.title = this.msg_title
      this.msg_form.content = this.value2;
      this.msg_form.modelId = this.msg_id; 
      if(this.but == "执行"){
        console.log('---执行---')
            this.submitAuto(this.ids,this.msg_form)
            this.getJobSize()
            this.countRun()
          }else{
            sendBatch(this.ids,this.msg_form).then(response => {
        if(response.data === true){
          this.$modal.msgSuccess("发送成功");
          this.dialogTableVisible = false
          this.refreshCount()
        }
       });
          }
 
      }
  
    },
    submitMsgForm: function() {
      console.log(this.value1)
      if(this.value1 === "" || this.value1 === null){
        this.$message.warning('请选择模板');
      }else{
        this.msg_form.type =  this.radio;
      this.msg_form.userId =  this.user_id;
      this.msg_form.title = this.msg_title
      this.msg_form.content = this.value1;
      this.msg_form.modelId = this.msg_id; 
      // console.log(this.msg_form)      
    

            send(this.msg_form).then(response => {
             
             if(response.data === true){
               this.$modal.msgSuccess("发送成功");
              //  console.log('888888888888888888888')
              this.dialogTableVisible4 = false
               this.refreshCount()
             }
            })
      }
  
    },

       /** 修改按钮操作 */
       handleUpdateUser(row) {
      this.resetUser();
      const userId = row.userId || this.ids;
      getUser(userId).then(response => {
        this.user_form = response.data;
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.$set(this.form, "postIds", response.postIds);
        this.$set(this.form, "roleIds", response.roleIds);
        this.user_open = true;
        this.user_title = "修改用户";
        this.user_form.password = "";
      });
    },
    /** 提交按钮 */
    submitUserForm: function() {
      this.$refs["user_form"].validate(valid => {
        if (valid) {
          if (this.user_form.userId != undefined) {
            updateUser(this.user_form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.user_open = false;
              this.getUserList();
            });
          } else {
            addUser(this.user_form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.user_open = false;
              this.getUserList();
            });
          }
        }
      });
    },
      // 取消按钮
      cancel() {
      this.model_open = false;
      this.reset();
    },
      // 选择框通过内容查找全部
      sellectTotal(val){
        // console.log("------------")
      this.msg_id =  this.options.find(md => md.value === val).id;
      this.msg_title = this.options.find(md => md.value === val).label;
      // console.log( this.msg_id)
      // console.log(this.options)
      // console.log(this.msg_title)
    },
  /** 查询邮件模板列表 */
  getList() {
      this.loading = true;
      listModel(this.queryParams_model).then(response => {
        this.modelList = response.rows;
        // var cardNumObj = {};
          this.options.length = 0;

        this.modelList.forEach(model =>{
          //定义一个空的对象
          var  cardNumObj = { id: model.id, value: model.content,label:model.title };
          this.options.push(cardNumObj)
        })
        this.total = response.total;
        this.loading = false;
      });
    },
   
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        content: null,
        type: null
      };
      this.resetForm("form");
    },
      /** 新增按钮操作 */
      handleAdd() {
      this.reset();
      this.model_open = true;
      this.title = "添加模板";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      // console.log(id)
      getModel(id).then(response => {
        this.form = response.data;
        this.model_open = true;
        this.title = "修改模板";
      });
    },
        /** 提交按钮2 */
        submitForm2() {
          this.$refs["form2"].validate(valid => {
        if (valid) {
            addModel(this.form2).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }})
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateModel(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.model_open = false;
              this.getList();
            });
          } else {
            addModel(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.model_open = false;
              this.getList();
            });
          }
        }
      });
      
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除邮件模板编号为"' + ids + '"的数据项？').then(function() {
        return delModel(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

    refreshLineChart(){
      this.lineChartData.count.length = 0,
      this.lineChartData.date.length = 0,
      this.getLineChart()
    },
    //折线图数据
    getLineChart(){
      // console.log()
      lineChartDefault("1").then(response => {
          this.countList = response.rows
          // console.log("**********************")
          // console.log(this.countList)
          if(this.countList.length != 0){
            this.countList.forEach(data => {
              // console.log(data)
          this.lineChartData1.mailCounts.push(data.mailCount)
          this.lineChartData1.messCounts.push(data.messCount)
          // // cons
          this.lineChartData1.date.push(dayjs(data.date).format('MM-DD'))
          });
          }

          // console.log(this.lineChartData1)

      }),
      lineChartDefault("2").then(response => {
        this.countList = response.rows
          this.countList.forEach(data => {
            //  console.log(data.mailCount)
            this.lineChartData2.mailCounts.push(data.mailCount)
          this.lineChartData2.messCounts.push(data.messCount)
          // // cons
          this.lineChartData2.date.push(dayjs(data.date).format('MM-DD'))
          });
          // console.log('888888888888888888888')
          // console.log(this.lineChartData2)
          this.lineChartData = this.lineChartData2

      })
    },
    refreshCount(){
      // this.mailCount1 = 0,
      // this.msgCount1 = 0,
      //   this.totalCount = 0,
      //     console.log('888888888888888888888')
      //   console.log(this.totalCount)
      //   console.log('888888888888888888888')
        this.getCountAll()
    },

    //统计数据
    getCountAll(){
      count().then(response => {
        this.mailCount1 = response.data.mailCount
        this.msgCount1 = response.data.msgCount
        this.totalCount = this.mailCount1+this.msgCount1
        // console.log(response.data.mailCount)
      })
    },


    backAnimation:function (anim2) {

      this.anim2 = anim2;
      // this.anim.setSpeed(0.5)
      this.anim2.stop();
    },

    handleApiAnimation:function (anim1) {
      this.anim1 = anim1;
      this.anim1.pause();
    },

    handleAnimation: function (anim) {
      this.anim = anim;
      this.anim.pause();
    },
    status: function () {
      // console.log(this.flag)
      if(this.flag==='0'){
        this.status_n = "运行中"
        this.anim.setSpeed(1.5)
        this.anim.play();
        // this.anim.playSegments([(1,5),(19,21)], false)
      }
      else{
        this.status_n = "已停止"
        this.anim.pause();
      }
      },

    status2: function() {
      if(this.flag2 === '0'){
        this.status_n2 = "运行中"
        this.anim1.play();
      }else{
        this.status_n2 = "关闭"
        this.anim1.pause();
      }
    },
    },
 
}
</script>

<style lang="scss" scoped>
.tableStyle ::v-deep .el-dialog .el-dialog__body {
    // padding: 30px 20px;
    color: #080808;
    font-size: 14px;
    word-break: break-all;
}
::v-deep .el-dialog__body {
    padding: 30px 20px;
    color: #606266;
    background-color: #a7c957;
    font-size: 14px;
    word-break: break-all;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track-piece{
  background-color:#f8f8f8;
  }
::v-deep .el-table__body-wrapper::-webkit-scrollbar{
  width:6px;
  }
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
  background-color:#dddddd;
  border-radius: 100px;
  }

::v-deep  .el-table__body-wrapper::-webkit-scrollbar-thumb:hover{
  background-color:#bbb;
}
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  
.row-con{
  text-align: center;
  line-height: 50px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    // background: #99a9bf;
  }
  .bg-purple {
    // background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 50px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 .text {
    font-size: 14px;
    font-weight:bolder;
    font-family:STHeiti
  }
  .title{
    font-size: 14px;
    font-weight: lighter;
    font-family:STHeiti
  }
  .title-m{
    font-size: 12px;
    font-weight: lighter;
    font-family:STHeiti
  }

  .item {
    padding: 18px 0;
  }
  .title-box{
    padding: 25px 0px 0px 20px;
  }
  .title-box-1{
    padding: 25px 0px 0px 50px;
  }
  .count-data{
    height: 28px;
    padding: 0px 0px 0px 20px;
  }

  .count-data-1{
    height: 28px;
    padding: 0px 0px 0px 50px;
  }
  .box-chart{
    height: 260px;
    background: linear-gradient(to left,  #a7c957,  #8BC34A) !important;
    // background-color: #8BC34A;
    // width: 600px;
  }
  .box-card {
    // width: 480px;
    
    // background-color:  #a7c957;
    // #00ffd2
    height: 260px;
  }
  ::v-deep .el-table .el-table__header-wrapper th,::v-deep .el-table .el-table__fixed-header-wrapper th {
    background-color: white;
    word-break: break-word;
    height: 40px;
    font-size: 13px;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #0a3b9b;
    cursor: not-allowed;
}
::v-deep .el-radio__input.is-disabled+span.el-radio__label {
    color: #000000;
    cursor: not-allowed;
}



  ::v-deep .el-form-item--medium .el-form-item__label {
    color: #000000;
    line-height: 36px;
}
.defineself ::v-deep  .el-form-item--medium .el-form-item__label {
  color: #000000;
    line-height: 38px;
}
.search-1 ::v-deep .el-input__inner {    
    line-height: 36px;
    width: 95%;
    border-radius: 20px;
}

  ::v-deep .el-table tr {
    // background-color:  #a7c957;
  }
  ::v-deep  .el-card__body, .el-main {
    padding: 0px 10px 0px 10px;
}
::v-deep    .el-switch__core:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 1px;
    border-radius: 20%;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 30px;
    height: 18px;
    background-color: #FFF;
}
::v-deep .el-card__header {
    padding: 10px 20px;
    border-bottom: 1px solid #EBEEF5;
    box-sizing: border-box;
}

// .drop-down-11 ::v-deep .el-button-group>.el-button:last-child {
//     border-top-left-radius: 0;
//     border-bottom-left-radius: 0;
//     height: 36px;
// }
  ::v-deep .el-switch__core{
    border-radius: 5px;
  }
  ::v-deep .el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -30px;
}

  ::v-deep .el-transfer-panel {
     width:350px;
    
   }
   ::v-deep  .el-transfer-panel__body {
    height: 430px;
}
 ::v-deep  .el-transfer-panel__list.is-filterable {
    height: 345px;
    padding-top: 0;
}

  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
.dashboard-editor-container {
  padding: 15px 32px 32px 32px;
  background-color: #689F38;
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
